<template>
  <ChartComp :id="id?id:'projectComp'"
    :message="projectCompMessage" />
</template>

<script>
// import { getStageStatistics } from '@/api/chart.js'
import ChartComp from '@/components/echart/charts.vue'
// let legendData = ['科研指南', '招投标', '开题', '合同', '中期', '结题']
// let seriesData = [
//   { value: 35, scale: 12, name: '科研指南' },
//   { value: 15, scale: 12, name: '招投标' },
//   { value: 113, scale: 12, name: '开题' },
//   { value: 101, scale: 12, name: '合同' },
//   { value: 89, scale: 12, name: '中期' },
//   { value: 82, scale: 12, name: '结题' }
// ]
export default {
  components: {
    ChartComp
  },
  props: {
    id: {
      require: true,
      type: String,
      default: ''
    },
    year: {
      require: true,
      type: String,
      default: ''
    }
  },
  watch: {
    year: {
      handler() {
        this.initMessage()
      }
    },
    id: {
      handler() {
        this.initMessage()
      }
    },
    deep: true
  },
  data() {
    return {
      projectCompMessage: {}
    }
  },
  mounted() {
    this.initMessage()
  },
  methods: {
    initMessage() {
      let res = {
        code: 200,
        message: '操作成功',
        data: {
          legendData: [
            '按机时预约',
            '按次数预约',
            '按项目预约',
            '送样检测',
            '其他'
          ],
          totalProjectNum: 8,
          seriesData: [
            {
              value: 1,
              scale: '12.5',
              name: '按机时预约'
            },
            {
              value: 2,
              scale: '25',
              name: '按次数预约'
            },
            {
              value: 2,
              scale: '25',
              name: '按项目预约'
            },
            {
              value: 3,
              scale: '37.5',
              name: '送样检测'
            },
            {
              value: 0,
              scale: '0',
              name: '其他'
            }
          ]
        }
      }
      // getStageStatistics({ year: this.year }).then(res => {
      let legendData = res.data.legendData
      let seriesData = res.data.seriesData
      let total = res.data.totalProjectNum

      this.projectCompMessage = {
        colors: [
          '#6C87EF',
          '#57E6AD',
          '#4CADF8',
          '#FFC24C',
          '#FF8A5C',
          '#DB91ED',
          '#8A2BE2',
          '#67CFFF'
        ],
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'line'
          },
          textStyle: {
            color: '#fff'
          },
          className: 'LineChart-tooltip',
          extraCssText: `background-color: rgba(0, 21, 50, 0.8);
            color: #fff;
            border: 1px solid #214D87;
            border-color: #214D87;
            box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
            border-radius: 4px;`
        },
        // 设置环形中间的数据
        graphic: {
          elements: [
            {
              type: 'text',
              left: 'center',
              top: '30%',
              z: 2,
              zlevel: 100,
              style: {
                text: total,
                font: '32px Microsoft YaHei',
                fill: '#fff'
              }
            },
            {
              type: 'text',
              left: 'center',
              top: '40%',
              z: 2,
              zlevel: 100,
              style: {
                text: '总数（个）',
                fill: '#D1D5DD',
                font: '14px Microsoft YaHei'
              }
            }
          ]
        },
        legend: [
          {
            // top: 'bottom',
            bottom: '30px',
            left: '10%',
            orient: 'vertical',
            itemWidth: 8, // 每个图例标记的宽度
            itemHeight: 8, // 每个图例标记的高度
            symbol: 'circle', // 图例标记的类型，这里设置为圆形
            textStyle: {
              //图例文字的样式
              color: '#ccc',
              fontSize: 14
            },
            formatter: function (name) {
              let v
              let s
              for (let i = 0, n = seriesData.length; i < n; i++) {
                if (name == seriesData[i].name) {
                  v = seriesData[i].value
                  s = seriesData[i].scale
                }
              }
              return `${name}(${v}) ${s}%`
            },
            data: legendData.slice(0, 3) // 切割 legend.data 进行分列展示  第一列
          },
          {
            // top: 'bottom',
            right: '20%',
            bottom: '30px',
            orient: 'vertical',
            itemWidth: 8, // 每个图例标记的宽度
            itemHeight: 8, // 每个图例标记的高度
            symbol: 'circle', // 图例标记的类型，这里设置为圆形
            textStyle: {
              //图例文字的样式
              color: '#ccc',
              fontSize: 16
            },
            formatter: function (name) {
              let v
              let s
              for (let i = 0, n = seriesData.length; i < n; i++) {
                if (name == seriesData[i].name) {
                  v = seriesData[i].value
                  s = seriesData[i].scale
                }
              }
              return `${name}(${v}) ${s}%`
            },
            data: legendData.slice(3, 6) // 切割 legend.data 进行分列展示  第一列
          }
        ],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['35%', '55%'],
            center: ['50%', '35%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 6,
              borderColor: 'transparent',
              borderWidth: 2
            },
            label: {
              show: false
              // position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold',
                color: '#fff'
              },
              formatter: '{fs20|{b}}\n{c} ({d}%)'
            },
            labelLine: {
              show: false
            },
            data: seriesData
          }
        ]
      }
      // })
    }
  }
}
</script>

<style lang="less" scoped>
.a {
  color: rgba(255, 217, 61, 0.5);
}
</style>